@import "../global/global";

/**
 * @name Form
 * @category Style-only Components
 * @description Helps create forms with various types of controls.
 * @example-file ./form.examples.html
*/

$ring-input-width: $ring-unit*25;

.ring-form {
  @include ring-font;
}

.ring-form_white-bg {
  background: white;
}

.ring-form_border {
  border: 1px solid $ring-gray-color;
  border-radius: 2px;
}

.ring-form_rows {
  .ring-form__label {
    float: none;
    max-width: none;
  }

  .ring-form__control {
    margin-left: 0;
    width: 42 * $ring-unit;
  }
}

.ring-form__wrap {
  padding: 3*$ring-unit 4*$ring-unit 0 4*$ring-unit;
  margin-bottom: 0;
}

.ring-form__header {
  min-height: 13px;
  padding-bottom: 2*$ring-unit;
}

.ring-form__control__description {
  padding-top: $ring-unit;
  font-size: $ring-font-size-smaller;
  line-height: 16px !important;
  color: $ring-dark-gray-color;
  display: block;
}

.ring-form__title-img {
  float: left;

  height: 4*$ring-unit;
  border: 0;
}

.ring-form__title {
  display: block;
  margin-bottom: $ring-unit;

  font-weight: bold;
}

.ring-form__main-title {
  @include ring-font();

  font-size: 19px;
}

.ring-form__title_separated {
  margin: $ring-unit*3 0;
}

.ring-form__group {
  position: relative;
  margin: $ring-unit*2 0;

  &:first-child {
    margin-top: 0;
  }

  @include ring-clearfix();
}

.ring-form__group_united {
  padding-bottom: 0;
}

.ring-form__group .ring_form__group,
.ring-form__group_nested {
  padding-top: 0;
  padding-left: $ring-unit*2;

  .ring-form__control {
    margin-left: 18 * $ring-unit;
  }
}

.ring-form__label {
  position: relative;
  top: 0;
  display: inline-block;
  float: left;

  max-width: 18 * $ring-unit;
  line-height: 2 * $ring-unit;
  padding-top: $ring-unit/2;
  vertical-align: top;

  .ring-checkbox__label,
  .ring-radio-btn__label {
    top: -2px;
  }
}
/* End of special fix */

.ring-form__label_title {
  font-weight: bold;
}

.ring-form__control {
  position: relative;
  min-height: 3 * $ring-unit;
  margin-left: 20 * $ring-unit;
  width: auto;

  line-height: 3 * $ring-unit;
  vertical-align: top;
}

.ring-form__control_text:after {
  content: '';
  display: inline-block;
  height: $ring-unit*3;
  vertical-align: middle;
}

// Temporary solution, proper grid is necessary
.ring-form__control_secondary {
  position: absolute;
  top: $ring-unit;
  left: 27 * $ring-unit;
}

.ring-form__control_on {
  color: $ring-green-color;
}

.ring-form__control_off {
  color: $ring-error-color;
}

.ring-form__control-link {
  position: relative;
  top: 6px;
}

.ring-form__control_small {
  margin-left: 16*$ring-unit !important;
}

.ring-form__info {
  margin-bottom: -$ring-unit + 2;
  width: 85 * $ring-unit;
  margin-left: 20 * $ring-unit;
  line-height: 20px;
}

.ring-form__control__part {
  margin-right: $ring-unit;
}

// Form for key-value data
//
// You can add "ring-form\__group_short" to "ring-form\__group" to make the left column shorter
//
// Markup:
// <form class="ring-form">
//  <div class="ring-form__group ring-form__group_short">
//    <label class="ring-form__label">
//      <input class="ring-radio-btn" type="radio" name="find-type" id="breakout-checkbox-1"/>
//      <label class="ring-radio-btn__label" for="breakout-checkbox-1"></label>
//    </label>
//    <div class="ring-form__control">
//      <label for="breakout-checkbox-1">Users with same emails and similar names</label>
//    </div>
//  </div>
//  <div class="ring-form__group ring-form__group_short">
//    <label class="ring-form__label">
//      <input class="ring-radio-btn" type="radio" name="find-type" id="breakout-checkbox-2"/>
//      <label class="ring-radio-btn__label" for="breakout-checkbox-2"></label>
//    </label>
//    <div class="ring-form__control">
//      <label for="breakout-checkbox-2">Users with same emails</label>
//    </div>
//  </div>
//  <div class="ring-form__group ring-form__group_short">
//    <label class="ring-form__label">
//        <input id="short-checkbox-1" class="ring-checkbox" type="checkbox" name="example">
//        <label class="ring-checkbox__label" for="short-checkbox-1"></label>
//    </label>
//    <div class="ring-form__control">
//      <label class="ring-label" for="breakout-checkbox-3">Users having at least something in common</label>
//    </div>
//  </div>
//  <div class="ring-form__footer">
//    <button class="ring-button ring-button_blue">Save</button>
//    <button class="ring-button">Cancel</button>
//  </div>
// </form>

.ring-form__group_short {
  padding-bottom: 0;
  padding-top: $ring-unit / 2;

  &:last-child {
    padding-bottom: $ring-unit;
  }

  .ring-form__control {
    margin-left: $ring-unit * 3;
  }
}

.ring-form_small {
  & .ring-form__label {
    max-width: 12*$ring-unit;
  }

  & .ring-form__control {
    margin-left: 16*$ring-unit;
  }
}

